<template>
    <div class="bigWrap">
        <div class="header">
            <div class="headerTitle">
                <img class="companyIcon" src="../static/img/uupaotui/UU-logo.png"/>
                <div class="headerCenter">
                    <div @click="titleClick(0)" :class="{titleIsActive:firstPage}">首页</div>
                    <div @click="titleClick(1)" :class="{titleIsActive:onLineOrder}">在线下单</div>
                    <div @click="titleClick(2)" :class="{titleIsActive:productFunc}">产品功能</div>
                    <div @click="titleClick(3)" :class="{titleIsActive:businessCooperation}">商务合作</div>
                    <div @click="titleClick(4)" :class="{titleIsActive:aboutUs}">关于我们</div>
                    <div @click="titleClick(5)" :class="{titleIsActive:runBoyRecruit}">跑男招募</div>
                    <div @click="titleClick(6)" :class="{titleIsActive:openOperate}">开放平台</div>
                    <div @click="titleClick(7)" :class="{titleIsActive:helpCenter}">帮助中心</div>
                </div>
                <div class="headerWrapLoginRigister">
                    <div class="login">用户登录</div>
                    <div class="rigister">商户注册</div>
                </div>

            </div>
            <div class="headerPosition">
                <div class="wrapHeaderPosition">
                    <div>当前城市：北京</div>
                    <div>[切换城市]</div>
                </div>
            </div>
            <div class="headerComponnet">
                <div :class="{headerContent:true, classHelpBuy:classHelpBuy }" @click="helpClick(1)">
                    <div class="wrapHeaderImage " >
                        <img :src="imgHelpBuy" />
                    </div>
                    <div >UU帮您买</div>
                </div>
                <div :class="{headerContent:true, classHelpSend:classHelpSend}"  @click="helpClick(2)">
                    <div class="wrapHeaderImage">
                        <img :src="imgHelpSend" />
                    </div>
                    <div>UU帮我送</div>
                </div>
                <div :class="{headerContent:true, classHelpTake:classHelpTake}" @click="helpClick(3)">
                    <div class="wrapHeaderImage">
                        <img :src="imgHelpTake" />
                    </div>
                    <div>UU帮我取</div>
                </div>
                <div :class="{headerContent:true, classHelpWait:classHelpWait}" @click="helpClick(4)">
                    <div class="wrapHeaderImage">
                        <img :src="imgHelpWait" />
                    </div>
                    <div>UU代排队</div>
                </div>
            </div>
            <div class="headerIcon">
                <div class="wrapEachArraw ">
                    <div class="innerWrap" v-if="helpClickCounts==1">
                        <div class="upArraw" ></div>
                    </div>
                </div>
                <div class="wrapEachArraw">
                    <div class="innerWrap" v-if="helpClickCounts==2">
                        <div class="upArraw"></div>
                    </div>
                </div>
                <div class="wrapEachArraw">
                    <div class="innerWrap" v-if="helpClickCounts==3">
                        <div class="upArraw"></div>
                    </div>
                </div>
                <div class="wrapEachArraw">
                    <div class="innerWrap" v-if="helpClickCounts==4">
                        <div class="upArraw"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="sendThing">
                <div :class="{sendReciveIsActive:sendAddress}">
                    <div class="sendThingAddress" @click="sendReciveClick(1)">
                    <div class="wrapSendAddress">发货地址</div>
                    <div class="wrapSendAddressInfo">
                        <div class="wrapInput">
                            <input type="text" placeholder="请填写发货地址" v-model="writeSendAddress" @focus="inputFocus(1)" @blur="inputBlur(1)">
                            <div class="wrapGPSPosition" @click="gpsPosition(1)">
                                <img src="../static/img/uupaotui/icon_posi.png" />
                                <div>定位</div>
                            </div>
                            <div :class="{tips:true,showTips:showTipsSend}">使用百度地图API</div>
                        </div>
                        <div class="alwaysUse">常用</div>
                    </div>
                </div>
                </div>
                <div :class="{sendReciveIsActive:sendDoor}">
                    <div class="doorNumber" @click="sendReciveClick(2)">
                    <div class="wrapSendAddress">门牌号</div>
                    <div class="wrapSendAddressInfo">
                        <textarea type="text" placeholder="请填写具体楼号和门牌号"/>
                    </div>
                </div>
                </div>
                <div :class="{sendReciveIsActive:sendPerson}">
                    <div class="personInfo" @click="sendReciveClick(3)">
                    <div class="wrapSendAddress">发货人</div>
                    <div class="wrapSendAddressInfo">
                        <input type="text" placeholder="请填写发货人电话号码">
                        <input type="text" placeholder="选填发货人姓名">
                    </div>

                </div>
                </div>
            </div>
            <div class="reciveThing">
                <div :class="{sendReciveIsActive:reciveAddress}">
                    <div class="sendThingAddress" @click="sendReciveClick(4)">
                    <div class="wrapSendAddress">收货地址</div>
                    <div class="wrapSendAddressInfo">
                        <div class="wrapInput">
                            <input type="text" placeholder="请填写收货地址" v-model="writeReciveAddress" @focus="inputFocus(2)" @blur="inputBlur(2)">
                            <div class="wrapGPSPosition" @click="gpsPosition(2)">
                                <img src="../static/img/uupaotui/icon_posi.png" />
                                <div>定位</div>
                            </div>
                            <div :class="{tips:true,showTips:showTipsRecive}">使用百度地图API</div>
                        </div>
                        <div class="alwaysUse">常用</div>
                    </div>
                </div>
                </div>
                <div :class="{sendReciveIsActive:reciveDoor}">
                    <div class="doorNumber" @click="sendReciveClick(5)">
                    <div class="wrapSendAddress">门牌号</div>
                    <div class="wrapSendAddressInfo">
                        <textarea type="text" placeholder="请填写具体楼号和门牌号" />
                    </div>
                </div>
                </div>
                <div :class="{sendReciveIsActive:recivePerson}">
                    <div class="personInfo" @click="sendReciveClick(6)">
                    <div class="wrapSendAddress">收货人</div>
                    <div class="wrapSendAddressInfo">
                        <input type="text" placeholder="请填写收货人电话号码">
                        <input type="text" placeholder="选填收货人姓名">
                    </div>

                </div>
                </div>
            </div>
            <div class="thingInfo">
                <div class="sendThingAddress" >
                    <div class="wrapSendAddress">物品类型</div>
                    <div class="wrapSendAddressInfo">
                        <div @click="thingTypeClick(1)">普通<img :src="thingTypeActiveImg" v-show="puTong"/></div>
                        <div @click="thingTypeClick(2)">其他<img :src="thingTypeActiveImg" v-show="other"/></div>
                        <div @click="thingTypeClick(3)">美食<img :src="thingTypeActiveImg" v-show="deliciousFood"/></div>
                        <div @click="thingTypeClick(4)">文件<img :src="thingTypeActiveImg" v-show="document"/></div>
                        <div @click="thingTypeClick(5)">易碎<img :src="thingTypeActiveImg" v-show="yiSui"/></div>
                        <div @click="thingTypeClick(6)">洗衣<img :src="thingTypeActiveImg" v-show="xiYi"/></div>
                        <div @click="thingTypeClick(7)">手机<img :src="thingTypeActiveImg" v-show="phoneNumber"/></div>
                        <div @click="thingTypeClick(8)">蛋糕<img :src="thingTypeActiveImg" v-show="danGao"/></div>
                        <div @click="thingTypeClick(9)">鲜花<img :src="thingTypeActiveImg" v-show="xianHua"/></div>
                        <div @click="thingTypeClick(10)">贵重物品<img :src="thingTypeActiveImg" v-show="guiZhong"/></div>
                        <div @click="thingTypeClick(11)">钥匙<img :src="thingTypeActiveImg" v-show="yaoShi"/></div>
                    </div>
                </div>
                <div class="doorNumber">
                    <div class="wrapSendAddress">备注信息</div>
                    <div class="wrapSendAddressInfo">
                        <textarea type="text" placeholder="请填写物品具体信息"/>
                    </div>
                </div>
                <div class="personInfo">
                    <div class="wrapSendAddress">取货时间</div>
                    <div class="wrapSendAddressInfo">
                        <div>立即取货</div>
                        <div>预约取货</div>
                        <div>
                            <img src="../static/img/uupaotui/icon_m.png"/>
                            <div>跑男接单后立即上门取货</div>
                        </div>
                    </div>

                </div>
                <div class="showMore">
                    <div class="wrapMoreContent">
                        <img src="../static/img/uupaotui/形状 18.png" />
                        <div>点击展开更多</div>
                    </div>
                </div>
            </div>
            <div class="mapInfo">
                <div class="wrapMapInfo">
                    <div class="showMap">
                        <div class="map" id="map"></div>
                    </div>
                    <div class="mapRightInfo">
                        <div class="priceInfo">
                            <div class="orderDistance"><div>订单距离 :17.33公里</div></div>
                            <div class="distanceMoney"><div>跑腿费 :66.12元</div></div>
                            <div class="insuredPrice"><div>保价费 :5元</div></div>
                        </div>
                        <div class="couponType">
                            <div class="choseCoupon">选择优惠券</div>
                            <div class="wrapCouponInput">
                                <img src="../static/img/uupaotui/icon_arrow.png" />
                                <input type="text" placeholder="暂无可用优惠券">
                            </div>
                        </div>
                        <div class="orderInfo">
                            <div>订单总额 : 0 元</div>
                            <div>还需支付 : 0 元</div>
                        </div>
                        <div class="payWay">
                            <div class="wrapPayWay">支付方式</div>
                            <div class="choicePayWay">
                                <div class="wrapWXPayWay" @click="payWay(1)">
                                    <img :src="weiXinChecked"/>
                                    <div class="wrapBindPayWay">
                                        <img src="../static/img/uupaotui/icon_weixin.png"/>
                                        <div class="payWayName">微信支付</div>
                                    </div>
                                </div>
                                <div class="wrapZFBPayWay" @click="payWay(2)">
                                    <img :src="ALIChecked"/>
                                    <div class="wrapBindPayWay">
                                        <img src="../static/img/uupaotui/icon_alipay.png" />
                                        <div class="payWayName">支付宝支付</div>
                                    </div>
                                </div>
                                <div class="wrapAccountPayWay" @click="payWay(3)">
                                    <img :src="AccountsChecked"/>
                                    <div class="wrapBindPayWay">
                                        <img src="../static/img/uupaotui/icon_uu.png"/>
                                        <div class="payWayName">账户余额</div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="goBuy">
                            <div> 去支付</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footerTop">
                <div class="wrapAboutOur">
                    <div>关于我们</div>
                    <div class="wrapFooterBottom">
                        <div>关于UU跑腿</div>
                        <div>媒体报道</div>
                        <div>加入我们</div>
                    </div>
                </div>
                <div class="wrapOption">
                    <div>意见反馈</div>
                    <div class="wrapFooterBottom">
                        <div>常见问题</div>
                        <div>如何下单</div>
                        <div>如何付款</div>
                        <div>如何开具发票</div>
                    </div>
                </div>
                <div class="wrapNavigation">
                    <div>网站导航</div>
                    <div class="wrapFooterBottom">
                        <div>产品功能</div>
                        <div>在线下单</div>
                        <div>商务合作</div>
                        <div>跑男招募</div>
                        <div>开放平台</div>
                    </div>
                </div>
                <div class="wrapPhone">
                    <div>客服电话</div>
                    <div class="wrapFooterBottom">
                        <div> 400-9588-999</div>
                        <div>  &nbsp; 电子邮箱</div>
                        <div> uupaotui@163.com</div>
                    </div>
                </div>
                <div class="wrapOfficial">
                    <div class="eachOfficial">
                        <div>官方微信</div>
                        <div class="erWeiMa"></div>
                        <div class="wrapOfficialBottom">
                            <img src="../static/img/uupaotui/icon_weixin.png" />
                            <div>关注微信</div>
                        </div>
                    </div>
                    <div class="eachOfficial">
                        <div>官方微博</div>
                        <div class="erWeiMa"></div>
                        <div class="wrapOfficialBottom">
                            <img src="../static/img/uupaotui/icon_weixin.png" />
                            <div>关注微博</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footerBottom">
                <div class="footerCopy">UU跑腿 uupaotui.com 版权所有：郑州时空隧道信息技术有限公司@2015  豫ICP备15009964号-2</div>
            </div>
        </div>

        <div class="popMapMask"  v-show="showPop">
            <div class="wrapPopMap">
                <div class="popMap" id="popMap"></div>
                <div class="closeMask" @click="closeMask">
                    <img src="../static/img/uupaotui/close.png" />
                </div>
                <div class="wrapPopInput">
                    <div>购买地址</div>
                    <div>
                        <input type="text" id="suggestId" v-model="inputWorld" @keyup="inputKeyUp">
                        <div class="wrapInputList">
                            <div :class="{eachInputList:true} " @click="clickItemAddress(item)" v-for="(item,index) in searchResultList" :key="index" @mouseenter="inputMouseEnter(item)">
                                <img src="../static/img/uupaotui/椭圆 20.png" />
                                <div class="wrapPositionInfo">
                                    <div>{{item.title}}</div>
                                    <div>{{item.address}}</div>
                                </div>
                                <div class="inputListChecked">选中</div>
                            </div>

<!--                            <div class="eachInputList">-->
<!--                                <div class="wrapPageList">-->
<!--                                    <div class="popFirstPage">上一页</div>-->
<!--                                    <div class="popEachPage pageActived">1</div>-->
<!--                                    <div class="popEachPage">2</div>-->
<!--                                    <div class="popEachPage">3</div>-->
<!--                                    <div class="popEachPage">4</div>-->
<!--                                    <div class="popEachPage">5</div>-->
<!--                                    <div class="popLastPage">下一页</div>-->
<!--                                </div>-->
<!--                            </div>-->

                        </div>
                    </div>
                    <div></div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import UUHelpBuy from "../static/img/uupaotui/形状 8.png"
    import UUHelpBuyActive from "../static/img/uupaotui/形状 8on.png"
    import UUHelpSend from "../static/img/uupaotui/形状 7.png"
    import UUHelpSendActive from "../static/img/uupaotui/形状 7on.png"
    import UUHelpTake from "../static/img/uupaotui/形状 10.png"
    import UUHelpTakeActive from "../static/img/uupaotui/形状 10on.png"
    import UUHelpWait from "../static/img/uupaotui/形状 9.png"
    import UUHelpWaitActive from "../static/img/uupaotui/形状 9on.png"
    import thingTypeActive from "../static/img/uupaotui/素彩网www.sc115.com 143 拷贝.png"
    import payIconCheck from "../static/img/uupaotui/icon_check.png"
    import payIconUNCheck from "../static/img/uupaotui/icon_uncheck.png"
    import positionIcon from "../static/img/uupaotui/椭圆 20 拷贝.png"

    import BMap from 'BMap';
    export default {
        name: "UUPaoTui",
        data(){
            return{
                // 经纬度
				longitude:0,
                latitude:0,
                // 收发货处的定位经纬度
                sendLongitude:0,
                sendLatitude:0,
                reciveLongitude:0,
                reciveLatitude:0,
                // 标题模块点击
                titleClickCounts:2,
                // 头部点击那个模块
				helpClickCounts:2,
				// 头部帮助图片地址
				imgHelpBuy:UUHelpBuy,
				imgHelpSend:UUHelpSendActive,
				imgHelpTake:UUHelpTake,
				imgHelpWait:UUHelpWait,
                // 默认没激活
				classHelpBuy:false,
                classHelpSend:true,
                classHelpTake:false,
                classHelpWait:false,
                // 头部功能莫看：默认没激活
				firstPage:false,
				onLineOrder:true,
				productFunc:false,
				businessCooperation:false,
				aboutUs:false,
				runBoyRecruit:false,
				openOperate:false,
				helpCenter:false,
				// 收发货侧边默认没选中
                sendAddress:false,
                sendDoor:false,
                sendPerson:false,
                reciveAddress:false,
                reciveDoor:false,
                recivePerson:false,

                // 物品类型激活图片
				thingTypeActiveImg:thingTypeActive,

                // 物品类默认没有激活
				puTong:true,
                other:false,
                deliciousFood:false,
                document:false,
                yiSui:false,
                xiYi:false,
                phoneNumber:false,
                danGao:false,
                xianHua:false,
                guiZhong:false,
                yaoShi:false,
                // 默认支付方式没选中
				// payIcon:payIconUNCheck,
				weiXinChecked:payIconCheck,
                ALIChecked:payIconUNCheck,
                AccountsChecked:payIconUNCheck,
                // 是否显示弹窗
                showPop:false,
                // 收发货显示使用百度地图api
                showTipsSend:false,
                showTipsRecive:false,
                // 监听键盘输入内容
                inputWorld:"",
                // 保存弹窗的map对象
                map:null,
                // 保存主页map对象
                mainMap:null,
                // 搜索结果
                searchResultList:[],
                // 收发货地址详细信息
                writeSendAddress:"",
                writeReciveAddress:"",
                // 用于判断是收货还是发货点击了
                clickReciveSend:0,

            }
        },
        methods:{
			// 标题部分点击事件
                titleClick(count){
                this.titleClickCounts = count;
				this.firstPage=false;
                this.onLineOrder=false;
                this.productFunc=false;
                this.businessCooperation=false;
                this.aboutUs=false;
                this.runBoyRecruit=false;
                this.openOperate=false;
                this.helpCenter=false;
                switch (count) {
                    case 0:
						this.firstPage=true;
						break;
					case 1:
						this.onLineOrder=true;
						break;
					case 2:
						this.productFunc=true;
						break;
					case 3:
						this.businessCooperation=true;
						break;
					case 4:
						this.aboutUs=true;
						break;
					case 5:
						this.runBoyRecruit=true;
						break;
					case 6:
						this.openOperate=true;
						break;
					case 7:
						this.helpCenter=true;
						break;
                }
			},
            // 点击某个help模块显示对应的样式
			helpClick(count){
				this.helpClickCounts = count;
				this.classHelpBuy=false;
                this.classHelpSend=false;
                this.classHelpTake=false;
                this.classHelpWait=false;
				this.imgHelpBuy=UUHelpBuy;
                this.imgHelpSend=UUHelpSend;
                this.imgHelpTake=UUHelpTake;
                this.imgHelpWait=UUHelpWait;
				switch (count) {
                    case 1:
						this.classHelpBuy=true;
						this.imgHelpBuy = UUHelpBuyActive;
                        break;
					case 2:
						this.classHelpSend=true;
						this.imgHelpSend = UUHelpSendActive;
						break;
					case 3:
						this.classHelpTake=true;
						this.imgHelpTake = UUHelpTakeActive;
						break;
					case 4:
						this.classHelpWait=true;
						this.imgHelpWait = UUHelpWaitActive;
						break;
				}
            },
            // 收发货模块点击
			sendReciveClick(count){
				this.sendAddress=false;
                this.sendDoor=false;
                this.sendPerson=false;
                this.reciveAddress=false;
                this.reciveDoor=false;
                this.recivePerson=false;
                switch (count) {
                    case 1:
						this.sendAddress=true;
						break;
					case 2:
						this.sendDoor=true;
						break;
					case 3:
						this.sendPerson=true;
						break;
					case 4:
						this.reciveAddress=true;
						break;
					case 5:
						this.reciveDoor=true;
						break;
					case 6:
						this.recivePerson=true;
						break;
				}
            },
            // 物品类型模块点击
			thingTypeClick(count){
				this.puTong=false;
                this.other=false;
                this.deliciousFood=false;
                this.document=false;
                this.yiSui=false;
                this.xiYi=false;
                this.phoneNumber=false;
                this.danGao=false;
                this.xianHua=false;
                this.guiZhong=false;
                this.yaoShi=false;
                switch (count) {
					case 1:
						this.puTong=true;
						break;
					case 2:
						this.other=true;
						break;
					case 3:
						this.deliciousFood=true;
						break;
					case 4:
						this.document=true;
						break;
					case 5:
						this.yiSui=true;
						break;
					case 6:
						this.xiYi=true;
						break;
					case 7:
						this.phoneNumber=true;
						break;
					case 8:
						this.danGao=true;
						break;
					case 9:
						this.xianHua=true;
						break;
					case 10:
						this.guiZhong=true;
						break;
					case 11:
						this.yaoShi=true;
						break;
				}
            },

            // 支付方式模块点击
			payWay(count){
                this.weiXinChecked=payIconUNCheck;
                this.ALIChecked=payIconUNCheck;
                this.AccountsChecked=payIconUNCheck;
                switch (count) {
					case 1:
						this.weiXinChecked=payIconCheck;
						break;
					case 2:
						this.ALIChecked=payIconCheck;
						break;
					case 3:
						this.AccountsChecked=payIconCheck;
						break;
				}
            },

            // 收发货点击定位
            gpsPosition(count){
                this.showPop = true;
                this.clickReciveSend = count;

                var map = new BMap.Map("popMap");
                this.map = map
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == 0){
                        switch (count) {
                            case 1:
                                this.sendLongitude = r.point.lng;
                                this.sendLatitude = r.point.lat;
                                break;
                            case 2:
                                this.reciveLongitude = r.point.lng;
                                this.reciveLatitude = r.point.lat;
                                break;
                        }
                        var mk = new BMap.Marker(r.point);
                        map.addOverlay(mk);
                        // 定位图标显示出来
                        map.panTo(r.point);

                    }
                    else {
                        alert('位置获取出错'+this.getStatus());
                    }
                });
                let point = null;
                if (count==1){
                    point = new BMap.Point(this.sendLongitude,this.sendLatitude);
                }else {
                    point = new BMap.Point(this.reciveLongitude,this.reciveLatitude);
                }
                map.centerAndZoom(point,15);
                map.enableScrollWheelZoom();
            },

            // 监听键盘抬起事件
            inputKeyUp(){
                let that = this
                var options = {
                    onSearchComplete: function(results){
                        if (local.getStatus() == BMAP_STATUS_SUCCESS){
                            // 判断状态是否正确
                            that.searchResultList = [];
                            for (var i = 0; i < results.getCurrentNumPois(); i ++){
                                that.searchResultList.push({title:results.getPoi(i).title,address:results.getPoi(i).address});
                            }
                        }
                    }
                };
                var local = new BMap.LocalSearch(this.map, options);
                local.search(this.inputWorld);
            },
            inputMouseEnter(item){
                var myIcon = new BMap.Icon(positionIcon, new BMap.Size(17,22),{
                    imageSize:new BMap.Size(17,22),
                })
                let that = this
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(item.address, function(point){
                    if (point) {
                        that.map.clearOverlays(); // 清除之前所有的图标
                        that.map.addOverlay(new BMap.Marker(point,{icon:myIcon}));
                        that.map.panTo(point)
                    }else{
                        alert("您选择地址没有解析到结果!");
                    }
                },"河南省");
            },
            // 输入框获取焦点显示提示
            inputFocus(count){
                switch (count) {
                    case 1:
                        this.showTipsSend=true;
                        break;
                    case 2:
                        this.showTipsRecive=true;
                        break;
                }
            },

            // 输入框失去焦点隐藏提示功能
            inputBlur(count){
                switch (count) {
                    case 1:
                        this.showTipsSend=false;
                        break;
                    case 2:
                        this.showTipsRecive=false;
                        break;
                }
            },
            // 点击地址后给主页中的相应的input框中添加相应的内容，并调用画线工具
            clickItemAddress(item){
                this.closeMask();
                switch (this.clickReciveSend) {
                    case 1:
                        this.writeSendAddress = item.address+item.title;
                        break;
                    case 2:
                        this.writeReciveAddress = item.address+item.title;
                        break;
                }
                if(this.writeSendAddress && this.writeReciveAddress){
                    this.drawLine();
                }
            },
            // 奖位置转换为经纬度，并对应到收发货的经纬度
            changeAddress2lonlat(address,count){
                let that = this
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(address, function(point){
                    // console.log("point",point)
                    switch (count) {
                        case 1:
                            that.sendLongitude=point.lng;
                            that.sendLatitude=point.lat;
                            break;
                        case 2:
                            that.reciveLongitude=point.lng;
                            that.reciveLatitude=point.lat;
                            break;
                    }
                })
            },

            // 根据填写的地址画线
            drawLine(){
                this.changeAddress2lonlat(this.writeSendAddress,1)
                this.changeAddress2lonlat(this.writeReciveAddress,2)
                this.mainMap.clearOverlays();
                let that = this
                setTimeout(()=>{
                    that.mainMap.centerAndZoom(new BMap.Point(that.sendLongitude, that.sendLatitude), 15);
                    var polyline = new BMap.Polyline([
                        new BMap.Point(that.sendLongitude, that.sendLatitude),
                        new BMap.Point(that.reciveLongitude, that.reciveLatitude),
                    ], {strokeColor:"red", strokeWeight:2, strokeOpacity:1});   //创建折线
                    that.mainMap.addOverlay(polyline);
                },1000)
            },
            // 关闭弹窗的遮罩
            closeMask(){
              this.showPop=false
            },
            // 创建底部地图对象
			createMap () {
				/* eslint-disable */
				// 创建Map实例
				var map = new BMap.Map("map")
                this.mainMap = map;
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r){
					if(this.getStatus() == BMAP_STATUS_SUCCESS){
                        this.longitude = r.point.lng;
                        this.latitude = r.point.lat;
						var mk = new BMap.Marker(r.point);
						map.addOverlay(mk);
						// 定位图标显示出来
						map.panTo(r.point);
					}
					else {
						alert('位置获取出错'+this.getStatus());
					}
                    var myIcon = new BMap.Icon(positionIcon, new BMap.Size(17,22),{
                        imageSize:new BMap.Size(17,22),
                    })
                    map.clearOverlays();
                    map.addOverlay(new BMap.Marker(r.point,{icon:myIcon}));

                    map.enableScrollWheelZoom();
				});
            var point = new BMap.Point(this.longitude,this.latitude);
            map.centerAndZoom(point,15);
			}
        },
		mounted () {
			this.createMap();
		}
    }
</script>

<style lang="less" scoped>
    .bigWrap{
        width: 100vw;
        height: auto;
        position: relative;
        .header{
            width: 100%;
            height: 321PX;
            box-sizing: border-box;
            border-bottom: 5PX solid rgb(243,243,243);
            position: relative;
            .headerTitle{
                height: 60PX;
                width: 1200PX;
                margin: 0 auto;
                .companyIcon{
                    float: left;
                    height: 60PX;
                }
                .headerCenter{
                    width: 700PX;
                    height: 60PX;
                    float: left;
                    margin-left: 120PX;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14PX;
                    color: #666666;
                }
                .headerCenter>div{
                    height: 60PX;
                    line-height: 60PX;
                }
                .headerWrapLoginRigister{
                    width: 200PX;
                    height: 60PX;
                    float: right;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    align-items: center;
                    color: #fff;
                    .login{
                        width: 90PX;
                        height: 30PX;
                        border: solid 1PX #ff8b03;
                        text-align: center;
                        line-height: 30PX;
                        color: #ff8b03;
                    }
                    .rigister{
                        width: 90PX;
                        height: 30PX;
                        background-color: #ff8b03;
                        text-align: center;
                        line-height: 30PX;
                    }
                }
            }
            .headerPosition{
                border-top: 1PX solid rgb(230,230,230);
                .wrapHeaderPosition{
                    width: 1200PX;
                    margin: 0 auto;
                    height: 45PX;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 14PX;
                    color: #666666;
                    div{
                        font-size: 14PX;
                        color: #666666;
                        margin-right: 20PX;
                    }
                }
            }
            .headerComponnet{
                width: 666PX;
                height: 190PX;
                margin: 0 auto;
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                justify-content: space-between;
                .headerContent{
                    width: 80PX;
                    height: 108PX;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: space-between;
                    align-items: center;
                    .wrapHeaderImage{
                        width: 67PX;
                        height: 67PX;
                        border: 5PX solid rgb(247,247,247);
                        border-radius: 34PX;
                        box-sizing: border-box;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        img{
                            width: 29PX;
                            height: 24PX;
                        }
                    }
                }
                .classHelpBuy,.classHelpSend,.classHelpTake,.classHelpWait{
                    color: #ff8b03;
                    >.wrapHeaderImage{
                        border-color: #feab49;
                    }
                }
            }
            .headerIcon{
                width: 666PX;
                height: 15PX;
                margin: 9PX auto 0PX;
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                justify-content: space-between;
                .wrapEachArraw{
                    width: 80PX;
                    height: 15PX;
                    position: relative;
                    border-bottom: 5PX solid rgb(246,246,246);
                    .innerWrap{
                        width: 20PX;
                        height: 15PX;
                        background-color: #fff;
                        margin: 0 auto 10PX;
                        position: relative;
                        .upArraw{
                            margin-top: 5PX;
                            width: 15PX;
                            height: 15PX;
                            border: 0;
                            border-top: 5PX solid rgb(246,246,246);
                            border-right: 5PX solid rgb(246,246,246);
                            transform: rotate(-45deg);
                        }
                    }
                }
            }
        }
        .content{
            width: 1026PX;
            height: 1339PX;
            margin: 0 auto;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-evenly;
            .sendThing{
                height: 214PX;
                width: 100%;
                .sendThingAddress{
                    width: 906PX;
                    height: 38PX;
                    margin: 30PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 804PX;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .wrapInput{
                        width:693PX;
                        height: 38PX;
                        margin-left: 1PX;
                        position: relative;
                        border: solid 1PX #cccccc;
                        input::placeholder{
                            padding-left: 17PX;
                            color: #bbbbbb;
                            font-size: 13PX;
                        }
                        input{
                            width: calc(100% - 2PX);
                            height: 38PX;
                            margin-left: 1PX ;
                            border: none;
                        }
                        .wrapGPSPosition{
                            width: 48PX;
                            position: absolute;
                            right: 0;
                            top: 50%;
                            margin-right: 12PX;
                            font-size: 13PX;
                            transform: translateY(-50%);
                            display: flex;
                            flex-flow: row nowrap;
                            justify-content: space-between;
                            align-items: center;
                            img{
                                width: 16PX;
                            }
                            div{
                                font-size: 13PX;
                                color: #bbbbbb;
                                line-height: 40PX;
                            }
                        }
                        .tips{
                            position: absolute;
                            left: 0;
                            top: 0;
                            margin-top: 38PX;
                            color: #fff;
                        }
                    }
                    .alwaysUse{
                        width: 100PX;
                        height: 38PX;
                        background-color: #ff8b03;
                        border-radius: 3PX;
                        text-align: center;
                        line-height: 38PX;
                        font-size: 13PX;
                        color: #ffffff;
                    }
                }
                .doorNumber{
                    width: 906PX;
                    height: 38PX;
                    margin: 20PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 803PX;
                        margin-right: 1PX;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                        border: solid 1PX #cccccc;
                        textarea::placeholder{
                            padding-top: 13PX;
                            padding-left: 17PX;
                            color: #bbbbbb;
                            font-size: 13PX;
                        }
                        textarea{
                            width: calc(100% - 2PX);
                            height: 36PX;
                            margin: 1PX;
                            border: none;
                        }
                    }
                }
                .personInfo{
                    width: 906PX;
                    height: 38PX;
                    margin: 20PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 804PX;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: left;
                        align-items: center;
                        input::placeholder{
                            color: #bbbbbb;
                            font-size: 13PX;
                            padding-left: 17PX;
                        }
                        input:first-child{
                            width: 242PX;
                            height: 38PX;
                            border: solid 1PX #cccccc;
                        }
                        input:nth-child(2){
                            margin-left: 10PX;
                            width: 188PX;
                            height: 38PX;
                            border: solid 1PX #cccccc;
                        }
                    }
                }

            }
            .sendThing:hover{
                box-shadow: 1PX 1PX 27PX 0PX
                rgba(6, 0, 1, 0.09);
            }
            .reciveThing{
                height: 214PX;
                width: 100%;
                .sendThingAddress{
                    width: 906PX;
                    height: 38PX;
                    margin: 30PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 804PX;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .wrapInput{
                        width:693PX;
                        height: 38PX;
                        margin-left: 1PX;
                        position: relative;
                        border: solid 1PX #cccccc;
                        input::placeholder{
                            padding-left: 17PX;
                            color: #bbbbbb;
                            font-size: 13PX;
                        }
                        input{
                            width: calc(100% - 2PX);
                            margin: 1PX;
                            height: 37PX;
                            border: none;
                        }
                        .wrapGPSPosition{
                            width: 48PX;
                            position: absolute;
                            right: 0;
                            top: 50%;
                            margin-right: 12PX;
                            font-size: 13PX;
                            transform: translateY(-50%);
                            display: flex;
                            flex-flow: row nowrap;
                            justify-content: space-between;
                            align-items: center;
                            img{
                                width: 16PX;
                            }
                            div{
                                font-size: 13PX;
                                color: #bbbbbb;
                                line-height: 40PX;
                            }
                        }
                        .tips{
                            position: absolute;
                            left: 0;
                            top: 0;
                            margin-top: 38PX;
                            color: #fff;
                        }

                    }
                    .alwaysUse{
                        width: 100PX;
                        height: 38PX;
                        background-color: #ff8b03;
                        border-radius: 3PX;
                        text-align: center;
                        line-height: 38PX;
                        font-size: 13PX;
                        color: #ffffff;
                    }


                }
                .doorNumber{
                    width: 906PX;
                    height: 38PX;
                    margin: 20PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 803PX;
                        margin: 1PX 1PX 1PX 0;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                        border: solid 1PX #cccccc;
                        textarea::placeholder{
                            padding-top: 13PX;
                            padding-left: 17PX;
                            color: #bbbbbb;
                            font-size: 13PX;
                        }
                        textarea{
                            width: calc(100% - 2PX);
                            height: 36PX;
                            margin: 1PX;
                            border: none;
                        }
                    }
                }
                .personInfo{
                    width: 906PX;
                    height: 38PX;
                    margin: 20PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 804PX;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: left;
                        align-items: center;

                        input::placeholder{
                            color: #bbbbbb;
                            font-size: 13PX;
                            padding-left: 17PX;
                        }
                        input:first-child{
                            width: 242PX;
                            height: 38PX;
                            border: solid 1PX #cccccc;
                        }
                        input:nth-child(2){
                            margin-left: 10PX;
                            width: 188PX;
                            height: 38PX;
                            border: solid 1PX #cccccc;
                        }
                    }
                }
            }
            .reciveThing:hover{
                box-shadow: 1PX 1PX 27PX 0PX
                rgba(6, 0, 1, 0.09);
            }
            .thingInfo{
                height: 356PX;
                width: 100%;
                position: relative;
                overflow: hidden;
                .sendThingAddress{
                    width: 906PX;
                    height: 96PX;
                    margin: 30PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }

                    .wrapSendAddressInfo{
                        float: right;
                        width: 804PX;
                        height: 96PX;
                        display: flex;
                        flex-flow: row wrap;
                        align-items: center;
                        >div{
                            position: relative;
                            text-align: center;
                            line-height: 38PX;
                            margin-right: 6PX;
                            font-size: 13PX;
                            color: #666666;
                            width: 93PX;
                            height: 38PX;
                            background-color: #f5f5f5;
                            border-radius: 3PX;
                            img{
                                position: absolute;
                                width: 22PX;
                                right: 0;
                                bottom: 0;
                            }
                        }
                        >div:nth-child(8){
                            margin-right: 0;
                        }
                        >div:nth-child(9){
                            margin-top: 15PX;
                        }
                        >div:nth-child(10){
                            margin-top: 15PX;
                        }
                        >div:nth-child(11){
                            margin-top: 15PX;
                        }
                    }
                }
                .doorNumber{
                    width: 906PX;
                    height: 96PX;
                    margin: 20PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 803PX;
                        margin-right: 1PX;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;

                        textarea{
                            width: 100%;
                            height: 96PX;
                        }
                        textarea::placeholder{
                            color: #bbbbbb;
                            padding-left: 17PX;
                            padding-top: 13PX;
                            font-size: 13PX;
                        }

                    }
                }
                .personInfo{
                    width: 906PX;
                    height: 38PX;
                    margin: 20PX auto 0PX;
                    .wrapSendAddress{
                        text-align: right;
                        float: left;
                        width: 70PX;
                        font-size: 13PX;
                        color: #333333;
                        line-height: 38PX;
                    }
                    .wrapSendAddressInfo{
                        float: right;
                        width: 804PX;
                        height: 38PX;
                        >div{
                            float: left;
                        }
                        >div:first-child{
                            width: 96PX;
                            height: 38PX;
                            line-height: 38PX;
                            text-align: center;
                            background-color: #ff8b03;
                            border-radius: 3PX;
                            color: #fff;
                        }
                        >div:nth-child(2){
                            width: 96PX;
                            height: 38PX;
                            line-height: 38PX;
                            text-align: center;
                            border-radius: 3PX;
                            background-color: rgb(245,245,245);
                        }
                        >div:last-child{
                            width: 210PX;
                            height: 38PX;
                            margin-left: 12PX;
                            color: #ff8b03;
                            line-height: 38PX;
                            font-size: 13PX;
                            display: flex;
                            flex-flow: row nowrap;
                            align-items: center;
                            justify-content: start;
                            img{
                                margin-right: 10px;
                                width: 17PX;
                                text-align: center;
                            }
                        }

                    }
                }
                .showMore{
                    width: 192PX;
                    height: 53PX;
                    background-color: rgb(245,245,245);
                    left: calc(50% - 91PX);
                    bottom: 0;
                    transform: translateY(50%);
                    box-shadow: 0PX -1PX 2PX 0PX
                    rgba(225, 225, 225, 0.08);
                    border-radius: 26PX;
                    position: absolute;
                    bottom: 0;
                    .wrapMoreContent{
                        width:150PX;
                        display: flex;
                        flex-flow: row nowrap;
                        margin: 0 auto;
                        align-items: center;
                        justify-content: space-between;
                        img{
                            margin-left: 10PX;
                            width: 10PX;
                            height: 9PX;
                        }
                        div{
                            width: 130PX;
                            margin-left: 10PX;
                            font-size: 13PX;
                            color: #666666;
                        }
                    }
                }
            }
            .thingInfo:hover{
                box-shadow: 1PX 1PX 27PX 0PX
                rgba(6, 0, 1, 0.09);
            }
            .mapInfo{
                height: 304PX;
                width:  100%;
                .wrapMapInfo{
                    width:914PX;
                    height: 244PX;
                    margin: 30PX 60PX 30PX 52PX;
                    .showMap{
                        width: 544PX;
                        height: 244PX;
                        float: left;
                        .map{
                            width: 544PX;
                            height: 244PX;
                        }
                    }
                    .mapRightInfo{
                        width: 347PX;
                        height: 244PX;
                        float: right;
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: space-between;
                        .priceInfo{
                            height: 15PX;
                            display: flex;
                            flex-flow: row nowrap;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 13PX;
                            text-align: left;
                            .orderDistance{
                                margin-left: -16%;
                                div{
                                    font-size: 13PX;
                                    width: 100%;
                                    transform: scale(0.8);
                                }
                            }

                            .distanceMoney{
                                text-align: left;
                                div{
                                    text-align: left;
                                    transform: scale(0.8);
                                }
                            }

                            .insuredPrice{
                                margin-right: -15%;
                                div{
                                    transform: scale(0.8);
                                }
                            }
                        }
                        .couponType{
                            width: 100%;
                            height: 38PX;
                            display: flex;
                            flex-flow: row nowrap;
                            align-items: center;
                            justify-content: space-between;
                            .choseCoupon{
                                width: 65PX;
                                height: 38PX;
                                line-height: 38PX;
                                text-align: center;
                                font-size: 13PX;
                                white-space: nowrap;
                                transform:scale(0.9);
                            }
                            .wrapCouponInput{
                                width: 249PX;
                                height: 38PX;
                                border: 1PX solid rgb(245,245,245);
                                position: relative;
                                input{
                                    width: 247PX;
                                    height: 38PX;
                                    margin-left: 1PX;
                                }
                                input::placeholder{
                                    padding-left: 17PX;
                                    padding-top: 13PX;
                                }

                                img{
                                    width: 13PX;
                                    height: 8PX;
                                    position: absolute;
                                    right: 0;
                                    top: calc(50% - 4PX);
                                    margin-right: 10PX;
                                }
                            }

                        }
                        .orderInfo{
                            width: 100%;
                            height: 30PX;
                            display: flex;
                            flex-flow: row nowrap;
                            justify-content: space-evenly;
                            align-items: center;
                            background-color: #fff2e2;
                            border-radius: 3PX;
                            color: #ff6600;
                            div{
                                transform:scale(0.8);
                            }
                        }
                        .payWay{
                            width: 100%;
                            height: 47PX;
                            display: flex;
                            flex-flow: row nowrap;
                            justify-content: space-between;
                            .wrapPayWay{
                                width: 65PX;
                                font-size: 13PX;
                                white-space: nowrap;
                                transform:scale(0.9);
                            }
                            .choicePayWay{
                                width: 249PX;
                                height: 47PX;
                                display: flex;
                                flex-flow: row wrap;
                                justify-content: space-between;
                                align-items: center;
                                >div{
                                    width: 105PX;
                                    height: 20PX;
                                    display: flex;
                                    flex-flow: row nowrap;
                                    align-items: center;
                                    justify-content: space-between;
                                    >img{
                                        width: 12PX;
                                        height: 12PX;
                                    }
                                    .wrapBindPayWay{
                                        margin-left: 10PX;
                                        height: 20PX;
                                        display: flex;
                                        flex-flow: row nowrap;
                                        align-items: center;
                                        justify-content: space-between;
                                        >img{
                                            width: 20PX;
                                            height: 20PX;
                                        }
                                        .payWayName{
                                            font-size: 13PX;
                                            line-height: 20PX;
                                            white-space: nowrap;
                                            transform: scale(0.8);
                                        }
                                    }


                                }
                                >div:nth-child(2){
                                    width: 118PX;
                                }


                            }
                        }
                        .goBuy{
                            width: 100%;
                            height: 38PX;
                            background-color: #ff8b03;
                            border-radius: 3PX;
                            color: #fff;
                            text-align: center;
                            line-height: 38PX;
                            font-size: 14PX;
                            >div{
                                transform: scale(0.8);
                            }
                        }

                    }
                }
            }
            .mapInfo:hover{
                box-shadow: 1PX 1PX 27PX 0PX
                rgba(6, 0, 1, 0.09);
            }

        }
        .footer{
            width:100%;
            height: 350PX;
            background-color: #f5f5f5;
            overflow: hidden;
            .footerTop{
                width: 1075PX;
                margin: 65PX auto 51PX;
                height: 204PX;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: start;
                >div{
                    width: 64PX;
                    height: 134PX;
                    >div:first-child{
                        font-size: 16PX;
                        white-space: nowrap;
                        height: 16PX;
                        color: #000;
                    }
                    .wrapFooterBottom{
                        color: #666;
                        margin-top: 35PX;
                        height: 81PX;
                        width: 100%;
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: space-between;
                        >div{
                            white-space: nowrap;
                            font-size: 12PX;
                            margin-left: -10PX;
                            transform: scale(0.75);
                        }
                    }
                }
                >div:nth-child(2){
                    width: 64PX;
                    height: 169PX;
                    .wrapFooterBottom{
                        height: 116PX;
                    }
                }
                >div:nth-child(3){
                    width: 64PX;
                    height: 204PX;
                    .wrapFooterBottom{
                        height: 151PX;
                    }

                }
                >div:nth-child(4){
                    width: 178PX;
                    height: 171PX;
                    >div:first-child{
                        font-size: 16PX;
                        white-space: nowrap;
                        height: 16PX;
                        color: #000;
                    }
                    .wrapFooterBottom{
                        color: #666;
                        margin-top: 35PX;
                        height: 119PX;
                        width: 100%;
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: space-between;
                        align-items: start;
                        >div{
                            height: 30PX;
                            line-height: 30PX;
                            font-size: 16PX;
                        }
                    }


                }
                >div:nth-child(5){
                    width: 261PX;
                    height: 167PX;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    align-items: center;
                    .eachOfficial{
                        width: 98PX;
                        height: 167PX;
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: space-between;
                        align-items: start;
                        .erWeiMa{
                            margin-top: 10PX;
                            width: 98PX;
                            height: 98PX;
                            background-color: yellow;
                        }
                        .wrapOfficialBottom{
                            width: 77PX;
                            height: 20PX;
                            margin: 0 auto;
                            display: flex;
                            flex-flow: row nowrap;
                            img{
                                width: 20PX;
                                height: 20PX;
                            }
                            div{
                                white-space: nowrap;
                                transform: scale(0.8);
                            }
                        }
                    }
                }
            }
            .footerBottom{
                height: 40PX;
                background-color: #e6e6e6;
                width: 100%;
                position: relative;
                .footerCopy{
                    position: absolute;
                    width: 502PX;
                    height: 24PX;
                    line-height: 24PX;
                    top: calc(50% - 12PX);
                    left: calc(50% - 251PX);
                    font-size: 12PX;
                    white-space: nowrap;
                    transform: scale(0.8);
                }
            }

        }
        .popMapMask{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
            .wrapPopMap{
                width: 1131PX;
                height: 682PX;
                background-color: #fff;
                margin: 126PX auto 0PX;
                position: relative;
                .popMap{
                    width: 1131PX;
                    height: 682PX;
                }
                .closeMask{
                    position: absolute;
                    width: 38PX;
                    height: 38PX;
                    top: 0PX;
                    right: 0PX;
                    background-color: #ff8b03;
                    color: #fff;
                    margin-right: 25PX;
                    img{
                        width: 38PX;
                    }
                }
                .wrapPopInput{
                    position: absolute;
                    width: 402PX;
                    height: 38PX;
                    background-color: yellow;
                    top: 0;
                    left: 0;
                    margin-top: 20PX;
                    margin-left: 25PX;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-evenly;
                    align-items: center;
                    >div:first-child{
                        width: 87PX;
                        height: 38PX;
                        background-color: #fff6f1;
                        text-align: center;
                        line-height: 38PX;
                        font-size: 14PX;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0PX;
                        color: #333333;
                    }
                    >div:nth-child(2){
                        width: 277PX;
                        height: 38PX;
                        position: relative;
                        >input{
                            width: 277PX;
                            height: 38PX;
                        }
                        .wrapInputList{
                            position: absolute;
                            left: 0;
                            top: 0;
                            margin-top: 38PX;
                            width: 277PX;
                            height: 550PX;

                            >div{
                                width: 100%;
                                height: 50PX;
                                background-color: #fff;
                            }
                            .eachInputList{
                                width: 100%;
                                height: 50PX;
                                display: flex;
                                flex-flow: row nowrap;
                                justify-content: space-evenly;
                                align-items: center;
                                img{
                                    width: 10PX;
                                    height: 16PX;
                                }
                                .wrapPositionInfo{
                                    width: 169PX;
                                    height: 31PX;
                                    display: flex;
                                    flex-flow: column nowrap;
                                    justify-content: space-between;
                                    align-items: start;
                                    >div:first-child{
                                        height: 13PX;
                                        font-size: 13PX;
                                        line-height: 13PX;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        letter-spacing: 0PX;
                                        color: #333333;
                                    }
                                    >div:nth-child(2){
                                        height: 12PX;
                                        line-height: 12PX;
                                        font-size: 12PX;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        letter-spacing: 0PX;
                                        color: #666666;
                                    }

                                }
                                .inputListChecked{
                                    width: 38PX;
                                    height: 26PX;
                                    border-radius: 3PX;
                                    color: #fff;
                                    text-align: center;
                                    line-height: 26PX;
                                }
                                .wrapPageList{
                                    width: 200PX;
                                    height: 18PX;
                                    margin: 16PX auto;
                                    display: flex;
                                    flex-flow: row nowrap;
                                    justify-content: space-between;
                                    align-items: center;
                                    .popFirstPage,.popLastPage{
                                        height: 18PX;
                                        line-height: 18PX;
                                        font-size: 11PX;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        letter-spacing: 0PX;
                                        color: #333333;
                                    }

                                    .popEachPage{
                                        width: 18PX;
                                        height: 18PX;
                                        line-height: 18PX;
                                        text-align: center;
                                    }

                                }
                            }
                            .eachInputList:hover{
                                background-color: #eeeeee !important;
                                .inputListChecked{
                                    background-color: #ff8b03 !important;
                                }
                            }
                        }
                    }
                    >div:nth-child(3){
                        background-color: #ff8b03;
                        width: 38PX;
                        height: 38PX;
                    }

                }

            }
        }
    }
    .titleIsActive{
        border-bottom: 1PX solid #ff8b03;
    }
    .sendReciveIsActive{
        border-left: 2PX solid #ff8b03;
    }
    .popInputChecked{
        background-color: #eeeeee !important;
        .inputListChecked{
            background-color: #ff8b03 !important;
        }
    }
    .pageActived{
        background-color: #eeeeee;
        border-radius: 3PX;
    }

    .showTips{
        color: black !important;
    }

</style>
